<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Wallpaper</title>
        <meta name="description" content="Here goes description" />
        <meta name="author" content="author name" />
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
        <!-- ======================================================================
                                    Mobile Specific Meta
        ======================================================================= -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- ======================================================================
                                    Style CSS + Google Fonts
        ======================================================================= -->
        <link href="css/swipebox.css" rel="stylesheet" />
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/animate.css" rel="stylesheet" />
        <link href="color-box/color-style.css" rel="stylesheet" />
        <link href="color-box/farbtastic/farbtastic.css" rel="stylesheet" />
        <link href="css/font-icon-moon.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
    </head>
    <body class="single-page">
        <div class="load-complete">
            <div class="load-position">
                <div class="logo wow flip">Wallpaper</div>
                <h6>Please wait, loading...</h6>
                <div class="loading">
                    <div class="loading-line"></div>
                    <div class="loading-break loading-dot-1"></div>
                    <div class="loading-break loading-dot-2"></div>
                    <div class="loading-break loading-dot-3"></div>
                </div>
            </div>
        </div>
        <!-- === START COLOR BOX === -->
        <div class="settings-box">
            <div class="settings-box-icon"><i class="fa fa-spin d-text-c fa-cog"></i></div>
            <div class="settings-box-title">Settings Box</div>
            <p>Primary color</p>
            <ul id="site_color">
                <li><span class="color_1"></span></li>
                <li><span class="color_2"></span></li>
                <li><span class="color_3"></span></li>
                <li><span class="color_4"></span></li>
                <li><span class="color-select"></span></li>      
            </ul>
            <hr> 
            <p>Layout type</p>
            <select name="site_layout">
                <option value="wide">Wide</option>
                <option value="boxed">Boxed</option>
            </select>
            <hr> 
            <p>Background patterns</p>
            <ul id="background_patterns">
                <li><img src="color-box/background/square-1.png" alt="patterns"></li>
                <li><img src="color-box/background/square-2.png" alt="patterns"></li>
                <li><img src="color-box/background/square-3.png" alt="patterns"></li>
                <li><img src="color-box/background/square-4.png" alt="patterns"></li>
                <li><img src="color-box/background/square-5.png" alt="patterns"></li>        
            </ul>
            <hr> 
            <p>Background images</p>
            <ul id="background_images">
                <li><img src="color-box/background/bg-image-1.jpg" alt="background"></li>
                <li><img src="color-box/background/bg-image-2.jpg" alt="background"></li>
                <li><img src="color-box/background/bg-image-3.jpg" alt="background"></li>
                <li><img src="color-box/background/bg-image-4.jpg" alt="background"></li>
                <li><img src="color-box/background/bg-image-5.jpg" alt="background"></li>        
            </ul>
        </div>
        <!-- === END COLOR BOX === -->
        <div class="box-wide">
            <!-- === START HEADER === -->
            <header class="header sticky-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="logo"><a href="index.html">Wallpaper</a></div>
                        </div>
                        <div class="col-md-8">
                            <nav class="menu">
                                <div class="responsive-menu d-text-c-h"><i class="fa fa-bars"></i></div>

                                <ul>
                                    <li><a class="d-text-c-h" href="#">Home</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="index.html">Home v1</a></li>
                                            <li><a class="d-text-c-h" href="index-v2.html">Home v2</a></li>
                                            <li><a class="d-text-c-h" href="index-v3.html">Home v3</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="d-text-c-h" href="#">Portfolio</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="portfolio-2-col.html">Portfolio 2 columns</a>
                                                <ul>
                                                    <li><a class="d-text-c-h" href="portfolio-2-col.html">Portfolio 2 columns</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-2-col-no-padding.html">Portfolio 2 columns no padding</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-2-col-v2.html">Portfolio 2 columns v2</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="d-text-c-h" href="portfolio-3-col.html">Portfolio 3 columns</a>
                                                <ul>
                                                    <li><a class="d-text-c-h" href="portfolio-3-col.html">Portfolio 3 columns</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-3-col-no-padding.html">Portfolio 3 columns no padding</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-3-col-v2.html">Portfolio 3 columns v2</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="d-text-c-h" href="portfolio-4-col.html">Portfolio 4 columns</a>
                                                <ul>
                                                    <li><a class="d-text-c-h" href="portfolio-fw-4-col.html">Portfolio fw 4 columns</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-4-col.html">Portfolio 4 columns</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-4-col-v2.html">Portfolio 4 columns v2</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="d-text-c-h" href="portfolio-6-col.html">Portfolio 6 columns</a>
                                                <ul>
                                                    <li><a class="d-text-c-h" href="portfolio-fw-6-col-v2-no-padding.html">Portfolio fw 6 columns v2 no padding</a></li>
                                                    <li><a class="d-text-c-h" href="portfolio-6-col.html">Portfolio 6 columns</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="d-text-c-h" href="project-v1.html">Project v1</a></li>
                                            <li><a class="d-text-c-h" href="project-v2.html">Project v2</a></li>
                                        </ul>                                       
                                    </li>
                                    <li><a class="d-text-c-h" href="#">Pages</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="about-us.html">About Us</a></li>
                                            <li><a class="d-text-c-h" href="coming-soon.html">Coming soon</a></li>
                                            <li><a class="d-text-c-h" href="error-404.html">Error 404</a></li>
                                            <li><a class="d-text-c-h" href="our-team.html">Our Team</a></li>
                                            <li><a class="d-text-c-h" href="services.html">Services</a></li>
                                            <li><a class="d-text-c-h" href="shortcodes.html">Shortcodes</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="d-text-c-h" href="#">Blog</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="blog-2c-rs.html">Blog 2 columns right sidebar</a></li>
                                            <li><a class="d-text-c-h" href="blog-3c.html">Blog 3 columns</a></li>
                                            <li><a class="d-text-c-h" href="blog-fw.html">Blog fullwidth</a></li>
                                            <li><a class="d-text-c-h" href="blog-fw-rs.html">Blog fullwidth right sidebar</a></li>
                                            <li><a class="d-text-c-h" href="post.html">Single Post</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="d-text-c-h" href="#">Shop</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="shop.html">Shop</a></li>
                                            <li><a class="d-text-c-h" href="shop-item.html">Single Product</a></li>
                                            <li><a class="d-text-c-h" href="shop-ls.html">Shop left sidebar</a></li>
                                            <li><a class="d-text-c-h" href="shop-rs.html">Shop right sidebar</a></li>
                                            <li><a class="d-text-c-h" href="cart.html">Cart</a></li>
                                        </ul>
                                    </li>
                                    <li><a class="d-text-c-h" href="#">Contact</a>
                                        <ul>
                                            <li><a class="d-text-c-h" href="contact-v1.html">Contact v1</a></li>
                                            <li><a class="d-text-c-h" href="contact-v2.html">Contact v2</a></li>
                                            <li><a class="d-text-c-h" href="contact-v3.html">Contact v3</a></li>
                                            <li><a class="d-text-c-h" href="contact-v4.html">Contact v4</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
            <!-- === END HEADER === -->


            <!-- === START CONTENT === -->
            <div class="content">
                <!-- === START PATH === -->
                <div class="path-section">
                    <div class="bg-cover">
                        <div class="container">
                            <h3><a class="d-text-c-h" href="index.html">Home</a> / <a class="d-text-c-h" href="shortcodes.html">Shortcodes</a></h3>
                        </div>
                    </div>
                </div>
                <!-- === END PATH === -->

                <!-- === START CONTENT === -->
                <div class="container">
                <h1 class="styled">Heading Style</h1>
                <h1>H1 Heading</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <h2>H2 Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <h3>H3 Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <h4>H4 Heading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <h5>H5 Heading</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <h6>H6 Heading</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/><br/>
                <h1 class="styled">Columns</h1>
                <h6>Full width</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                <br/>
                <div class="row">
                    <div class="col-md-6">
                    <h6>1/2 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                    </div>
                    <div class="col-md-6">
                    <h6>1/2 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-4">
                    <h6>1/3 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                    </div>
                    <div class="col-md-4">
                    <h6>1/3 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. </p>
                    </div>
                    <div class="col-md-4">
                    <h6>1/3 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. </p>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-3">
                    <h6>1/4 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation.</p>
                    </div>
                    <div class="col-md-3">
                    <h6>1/4 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation.</p>
                    </div>
                    <div class="col-md-3">
                    <h6>1/4 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation.</p>
                    </div>
                    <div class="col-md-3">
                    <h6>1/4 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation.</p>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-4">
                    <h6>1/3 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation.</p>
                    </div>
                    <div class="col-md-8">
                    <h6>2/3 column</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labor sit amet.</p>
                    </div>
                </div>
                <br/><br/>
                <h1 class="styled">Large Buttons</h1>
                <a href="#" class="button button-large button-type1 button-m1">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type1 button-m2">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type1 button-m3">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type1 button-m4">Large Button</a>
                <br/>
                <a href="#" class="button button-large button-m5">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-m6">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-m7">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-m1">Large Button</a>
                <br/>
                <a href="#" class="button button-large button-type2 button-m1">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type2 button-m2">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type2 button-m3">Large Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-large button-type2 button-m4">Large Button</a>
                <br/><br/><br/>
                <h1 class="styled">Medium Buttons</h1>
                <a href="#" class="button button-medium button-type1 button-m1">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type1 button-m2">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type1 button-m3">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type1 button-m4">Medium Button</a>
                <br/>
                <a href="#" class="button button-medium button-m5">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-m6">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-m7">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-m1">Medium Button</a>
                <br/>
                <a href="#" class="button button-medium button-type2 button-m1">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type2 button-m2">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type2 button-m3">Medium Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-medium button-type2 button-m4">Medium Button</a>
                <br/><br/><br/>
                <h1 class="styled">small Buttons</h1>
                <a href="#" class="button button-small button-type1 button-m1">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type1 button-m2">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type1 button-m3">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type1 button-m4">Small Button</a>
                <br/>
                <a href="#" class="button button-small button-m5">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-m6">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-m7">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-m1">Small Button</a>
                <br/>
                <a href="#" class="button button-small button-type2 button-m1">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type2 button-m2">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type2 button-m3">Small Button</a>
                 &nbsp;  &nbsp;  &nbsp; 
                <a href="#" class="button button-small button-type2 button-m4">Small Button</a>
                <br/><br/><br/>
                <h1 class="styled">Alert Messages</h1>  
                <div class="row">  
                    <div class="col-md-6">               
                        <div class="alert-box alert-normal alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Normal Message! Your Message Here</p>
                        </div>
                        <div class="alert-box alert-warning alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Warning Messages! Your Message Here</p>
                        </div>
                        <div class="alert-box alert-information alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Information Frequently Asked Questions! Your Message Here</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert-box alert-succes alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Success Message! Your Message Here</p>
                        </div>
                        <div class="alert-box alert-useful alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Useful Information! Your Message Here</p>
                        </div>
                        <div class="alert-box alert-custom alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            <p>Custom Message! Your Message Here</p>
                        </div>
                    </div>
                </div>
                <br/><br/><br/>
                <h1 class="styled">Tabs, slider and accordion</h1>  
                <div class="row">
                    <div class="col-md-4">
                        <div class="tab-widget">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab-1" class="d-text-c-h" data-toggle="tab">Popular Posts</a></li>
                                <li><a href="#tab-2" class="d-text-c-h" data-toggle="tab">Recent Posts</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade in active" id="tab-1">
                                    <div class="mini-post">
                                        <div class="mini-post-cover"><a href="#"><img src="images/item-1.jpg" alt="mini blog" /></a></div>
                                        <h3><a href="#" class="d-text-c">Going to the Next level</a></h3>
                                        <h6>5 days ago</h6>
                                        <p>A wonderful serenity has taken possession of my entire soul,  like these sweet mornings...</p>
                                    </div>
                                    <div class="mini-post">
                                        <div class="mini-post-cover"><a href="#"><img src="images/item-2.jpg" alt="mini blog" /></a></div>
                                        <h3><a href="#" class="d-text-c">Live like a god</a></h3>
                                        <h6>5 days ago</h6>
                                        <p>A wonderful serenity has taken possession of my entire soul,  like these sweet mornings...</p>
                                    </div>
                              </div>
                              <div class="tab-pane fade" id="tab-2">
                                    <div class="mini-post">
                                        <div class="mini-post-cover"><a href="#"><img src="images/item-3.jpg" alt="mini blog" /></a></div>
                                        <h3><a href="#" class="d-text-c">Going to the Next level</a></h3>
                                        <h6>5 days ago</h6>
                                        <p>A wonderful serenity has taken possession of my entire soul,  like these sweet mornings...</p>
                                    </div>

                                    <div class="mini-post">
                                        <div class="mini-post-cover"><a href="#"><img src="images/item-4.jpg" alt="mini blog" /></a></div>
                                        <h3><a class="d-text-c" href="#">Going to the Next level</a></h3>
                                        <h6>5 days ago</h6>
                                        <p>A wonderful serenity has taken possession of my entire soul,  like these sweet mornings...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <!-- === START SLIDER SECTION === -->
                            <section class="slider-section" id="slider-section">
                                <div class="slider" data-theme-plugin="slider" data-theme-item=".slide" data-theme-next=".slide-right" data-theme-prev=".slide-left" data-theme-container=".slide-wrapper">
                                    <ul class="slider-arrows">
                                        <li class="slide-left"><i class="icon-arrow-left10"></i></li>
                                        <li class="slide-right"><i class="icon-uniE91B"></i></li>
                                    </ul>

                                    <ul class="slide-wrapper">
                                        <li class="slide">
                                            <img src="images/slide-1.jpg" alt="slide">
                                        </li>
                                        <li class="slide">
                                            <img src="images/slide-2.jpg" alt="slide">
                                        </li>
                                        <li class="slide">
                                            <img src="images/slide-3.jpg" alt="slide">
                                        </li>
                                    </ul>

                                    <ul class="slider-dots" data-theme-plugin="bullets">
                                        <li class="d-bg-c-h d-border-c-h"></li>
                                        <li class="d-bg-c-h d-border-c-h"></li>
                                        <li class="d-bg-c-h d-border-c-h"></li>
                                    </ul>
                                </div>
                            </section>
                        <!-- === END SLIDER SECTION === -->
                       
                        <div class="panel-group" id="accordion">
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collaps-1">
                                  I want to ask you a question?
                                </a>
                              </h4>
                            </div>
                            <div id="collaps-1" class="panel-collapse collapse in">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collaps-2">
                                  I will ask another one if you let me?
                                </a>
                              </h4>
                            </div>
                            <div id="collaps-2" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collaps-3">
                                  How about a third question if i may?
                                </a>
                              </h4>
                            </div>
                            <div id="collaps-3" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                              </div>
                            </div>
                          </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collaps-4">
                                  Last question i promise ok?
                                </a>
                              </h4>
                            </div>
                            <div id="collaps-4" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collaps-5">
                                  Told you it was the last one!
                                </a>
                              </h4>
                            </div>
                            <div id="collaps-5" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                              </div>
                            </div>
                          </div>
                        </div>

                    </div>
                </div>

                <br/><br/><br/>
                <h1 class="styled">Carousel</h1>
                    <div class="our-clients-logo" data-theme-plugin="carousel" data-theme-container=".tesla-carousel-items" data-theme-item="&gt;div" data-theme-rotate="false" data-theme-autoplay="false" data-theme-hide-effect="false">
                        <div class="our-partners-arrows">
                            <span class="next"><i class="icon-uniE91B d-text-c-h"></i></span>
                            <span class="prev disabled"><i class="icon-arrow-left10 d-text-c-h"></i></span>
                        </div>
                        <div class="row tesla-carousel-items">
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-1.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-2.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-3.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-4.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-5.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-6.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-7.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-8.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-9.jpg" alt="partner image" /></a>
                            </div>
                            <div class="col-md-2 col-xs-4">
                                <a href="#"><img src="images/item-10.jpg" alt="partner image" /></a>
                            </div>
                        </div>
                    </div>

                    <br/><br/><br/>
                    <h1 class="styled">Pricing Tables</h1>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="pricing-table">
                                <div class="pricing-table-name">Silver</div>
                                <ul class="pricing-table-stuff">
                                    <li><span>Full</span> Email Support</li>
                                    <li><span>25GB</span> of Storage</li>
                                    <li><span>5</span> Domains Name</li>
                                    <li><span>10</span> Email Addresses</li>
                                </ul>
                                <div class="pricing-table-price"><span>$</span>25</div>
                                <p>per month</p>
                                <p><a href="#" class="button button-medium d-bg-c">Buy now</a></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="pricing-table">
                                <div class="pricing-table-name">Gold</div>
                                <ul class="pricing-table-stuff">
                                    <li><span>Full</span> Email Support</li>
                                    <li><span>50GB</span> of Storage</li>
                                    <li><span>10</span> Domains Name</li>
                                    <li><span>20</span> Email Addresses</li>
                                </ul>
                                <div class="pricing-table-price"><span>$</span>50</div>
                                <p>per month</p>
                                <p><a href="#" class="button button-medium d-bg-c">Buy now</a></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="pricing-table">
                                <div class="pricing-table-name">Platium</div>
                                <ul class="pricing-table-stuff">
                                    <li><span>Full</span> Email Support</li>
                                    <li><span>100GB</span> of Storage</li>
                                    <li><span>15</span> Domains Name</li>
                                    <li><span>30</span> Email Addresses</li>
                                </ul>
                                <div class="pricing-table-price"><span>$</span>99</div>
                                <p>per month</p>
                                <p><a href="#" class="button button-medium d-bg-c">Buy now</a></p>
                            </div>
                        </div>
                    </div>

                    <br/><br/><br/>
                    <h1 class="styled">Testimonials</h1>
                        <div class="testimonials-slider-2" data-theme-plugin="slider" data-theme-item=".testimonial" data-theme-next=".slide-right" data-theme-prev=".slide-left" data-theme-container=".testimonials-wrapper">
                            <ul class="testimonials-arrows">
                                <li class="slide-left"><i class="icon-arrow-left10 d-text-c-h"></i></li>
                                <li class="slide-right"><i class="icon-uniE91B d-text-c-h"></i></li>
                            </ul>
                            <ul class="testimonials-wrapper">
                                <li class="testimonial">
                                    <div class="testimonial-cover">                                    
                                        <img src="images/avatar-1.jpg" alt="testimonial avatar">
                                    </div>
                                    <div class="testimonial-content">
                                        <h2 class="d-text-c">Those amazing people...</h2>
                                        <p>‘But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.”</p>
                                        <h3>PETRA MURRAY, <span>Nature &amp; Health</span></h3>
                                    </div>
                                </li>
                                <li class="testimonial">
                                    <div class="testimonial-cover">
                                        <img src="images/avatar-2.jpg" alt="testimonial avatar">
                                    </div>
                                    <div class="testimonial-content">
                                        <h2 class="d-text-c">So much to do...</h2>
                                        <p>‘But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.”</p>
                                        <h3>Alisa Newer, <span>Houses &amp; Water</span></h3>
                                    </div>
                                </li>
                                <li class="testimonial">
                                    <div class="testimonial-cover">
                                        <img src="images/avatar-3.jpg" alt="testimonial avatar">
                                    </div>
                                    <div class="testimonial-content">
                                        <h2 class="d-text-c">Help is needed...</h2>
                                        <p>‘But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.”</p>
                                        <h3>John Doe MURRAY, <span>Children &amp; Teaching</span></h3>
                                    </div>
                                </li>
                            </ul>

                            <ul class="testimonials-dots" data-theme-plugin="bullets">
                                <li><i class="icon-quotes-left d-text-c-h"></i></li>
                                <li><i class="icon-quotes-left d-text-c-h"></i></li>
                                <li><i class="icon-quotes-left d-text-c-h"></i></li>
                            </ul>
                        </div>
                        <br/><br/><br/>
                        <h1 class="styled">Social Share</h1>
                        <ul class="socials darken">
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-facebook"></i></a></li>
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-twitter"></i></a></li>
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-googleplus6"></i></a></li>
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-instagram3"></i></a></li>
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-pinterest3"></i></a></li>
                            <li><a href="#" class="d-text-c-h d-border-c-h"><i class="icon-rss"></i></a></li>
                        </ul>
                        <br/><br/><br/>
                </div>
            </div>
            <!-- === END CONTENT === -->


            <!-- === START FOOTER === -->
            <footer class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="widget wow bounceInLeft">
                                <h2 class="logo">Wallpaper</h2>
                                <p>23408 Trafalguar Square, PO BOX 345<br/>Westminster, London<br/>United Kingdom</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="widget widget-blog-posts wow fadeInUp">
                                <h3 class="widget-title">Latest blog posts</h3>
                                <ul>
                                    <li><a href="#" class="d-text-c-h">Web Design Technics</a></li>
                                    <li><a href="#" class="d-text-c-h">Fiction vs Reality</a></li>
                                    <li><a href="#" class="d-text-c-h">10 Freebies Design Inspiration</a></li>
                                    <li><a href="#" class="d-text-c-h">Having fun at the lake</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="widget widget-tag-cloud wow fadeInUp">
                                <h3 class="widget-title">tag cloud</h3>
                                <a href="#" class="d-bg-c-h">Reserch</a>
                                <a href="#" class="d-bg-c-h">Development</a>
                                <a href="#" class="d-bg-c-h">Framework</a>
                                <a href="#" class="d-bg-c-h">Showcase</a>
                                <a href="#" class="d-bg-c-h">Design</a>
                                <a href="#" class="d-bg-c-h">Strategy</a>
                                <a href="#" class="d-bg-c-h">Bootstrap</a>
                                <a href="#" class="d-bg-c-h">Artist Design</a>
                                <a href="#" class="d-bg-c-h">Management</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="widget widget-socials wow bounceInRight">
                                <h3 class="widget-title">Social profiles</h3>
                                <p>On the other hand, we denounce with righteous indignation and dislike men.</p>
                                <ul class="socials">
                                    <li><a href="#" class="d-text-c-h d-border-c-h"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#" class="d-text-c-h d-border-c-h"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#" class="d-text-c-h d-border-c-h"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#" class="d-text-c-h d-border-c-h"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href="#" class="d-text-c-h d-border-c-h"><i class="fa fa-rss"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <p class="copywrite">© Copyright 2014 by GeoThemes. All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- === END FOOTER === -->
        </div>
        <!-- =========================== START SCRIPTS ========================== -->
        <script src="js/modernizr.custom.63321.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <script src="js/waypoints.js" type="text/javascript"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/placeholder.js" type="text/javascript"></script>
        <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
        <script src="js/masonry.pkgd.js" type="text/javascript"></script>
        <script src="js/jquery.swipebox.min.js" type="text/javascript"></script>
        <script src="js/wow.js" type="text/javascript"></script>
        <script src="js/knob.js" type="text/javascript"></script>
        <script src="js/jquery.counterup.js" type="text/javascript"></script>
        <script src="js/options.js" type="text/javascript"></script>
        <script src="js/plugins.js" type="text/javascript"></script>
        <script src="color-box/color-js.js" type="text/javascript"></script>
        <script src="color-box/farbtastic/farbtastic.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- =========================== END SCRIPTS ========================== -->
    </body>
</html>